<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>活动发布</title>
<%@include file="/common/wxCommon.jspf"%>
<link rel="stylesheet" href="${ctx }/css/org.css">
<style type="text/css">
.weui_select {
	padding-left: 0px;
	width: 80%;
}
.weui_cell_bd .required {
	color: red;
	margin-left: 50px;
}
.ml {
	margin-left: 34px;
}
.w100 {
	width: 100%!important;
}

.size12 {
	margin-top: 15px;
}
</style>
</head>
<body class="post-party">
	<header class="page-header">
      <h1 class="page-title">活动发布</h1>
    </header>
	<div class="party-info">
		<form method="post" action="${ctx }/weixin/organ/party/apply.shtml"
			id="partyForm" onsubmit="" enctype="multipart/form-data">
			<div class="weui_cells weui_cells_form">
				<div class="weui_cell">
			        <div class="weui_cell_hd"><label class="weui_label"><span class="required">*</span>活动类型</label></div>
			        <div class="weui_cell_bd weui_cell_primary">
			          <input class="weui_input" id="selectType" name="selectType" type="text" value="" readonly="" placeholder="请选择活动类型">
			          <input name="partyFormMap.type" id="partyFormMap_type" type="hidden" value="">
			        </div>
			        <div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
			    </div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label"><span class="required">*</span>活动主题</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="" onkeyup="" placeholder="请输入活动的主题"
							name="partyFormMap.subject">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label"><span class="required">*</span>预计规模</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id=""
							placeholder="请输入预计规模" name="partyFormMap.expectPerson">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label"><span class="required">*</span>联&nbsp;&nbsp;系&nbsp;&nbsp;人</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="" placeholder="请输入活动联系人"
							name="partyFormMap.contact">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label"><span class="required">*</span>联系方式</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="" placeholder="请输入联系方式"
							name="partyFormMap.phone">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label">&nbsp;&thinsp;注意事项</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="" placeholder="请输入注意事项"
							name="partyFormMap.notice">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd ">
						<label class="weui_label">&nbsp;&thinsp;参与对象</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id=""
							placeholder="请输入活动参与对象" name="partyFormMap.attendTarget">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label w100"><span class="required">*</span>活动详情</label>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_bd weui_cell_primary">
						<textarea class="weui_textarea" placeholder="请输入活动详情" rows="5" maxlength="1000"
								  name="partyFormMap.description"></textarea>
						<div class="weui_textarea_counter"><span>0</span>/1000</div>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><span class="required">*</span>活动地址</label>
					</div>
				</div>
				<div class="weui_cell weui_cell_select">
					<div class="weui_cell_bd weui_cell_primary">
						<span class="required">*</span>
						<select class="weui_select" name="partyFormMap.province">
							<!-- <option selected="" value="0">注册地址<span class="required">*</span>:省</option> -->
						</select>
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell weui_cell_select">
					<div class="weui_cell_bd weui_cell_primary">
						<span class="required">*</span>
						<select class="weui_select" name="partyFormMap.city">
							<!-- <option selected="" value="0">注册地址: 市</option> -->
						</select>
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell weui_cell_select">
					<div class="weui_cell_bd weui_cell_primary">
						<span class="required">*</span>
						<select class="weui_select" name="partyFormMap.area">
							<!-- <option selected="" value="0">注册地址: 区</option> -->
						</select>
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell weui_cell_select">
					<div class="weui_cell_bd weui_cell_primary">
						<span class="required">*</span>
						<select class="weui_select" name="partyFormMap.street">
							<!-- <option selected="" value="0">注册地址<span class="required">*</span>: 街道</option> -->
						</select>
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label ml"><span class="required">*</span>&nbsp;&nbsp;详细地址</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="partyFormMap_address"
							placeholder="请完善活动详细地址" name="partyFormMap.address">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><span class="required">*</span>开始时间</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="partyFormMap_startTime"
							placeholder="请选择活动开始时间" name="partyFormMap.startTime">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><span class="required">*</span>结束时间</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<input type="text" class="weui_input" id="partyFormMap_endTime"
							placeholder="请选择活动结束时间" name="partyFormMap.endTime">
					</div>
					<div class="weui_cell_ft ">
						<i class="weui_icon_warn"></i>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_hd">
						<label class="weui_label"><span class="required">*</span>活动图片</label>
					</div>
					<div class="weui_cell_bd weui_cell_primary">
						<div class="weui_uploader">
							<div class="weui_uploader_bd">
								<ul class="weui_uploader_files">
									<li class="weui_uploader_file"
										style="background-image: url(${ctx}/images/weixin/nothing.png)"></li>
									<input class="weui_uploader_input hide" type="file" name="partyFormMap.partyImage"
										accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp">
								</ul>
								<div><p class="gray size12">支持的图片扩展类型为bmp,jpg,jpeg,png,gif</p></div>
							</div>
						</div>
					</div>
				</div>
				<div class="weui_cell">
					<div class="weui_cell_bd weui_cell_primary">
						<textarea class="weui_textarea" placeholder="请输入活动的内容" rows="3"
							id="partyFormMap_detail" name="partyFormMap.detail"></textarea>
						<div class="weui_textarea_counter">
							<span>0</span>/200
						</div>
					</div>
				</div>
			</div>
			<div class="content-padded">
				<button type="submit" class="weui_btn weui_btn_warn">提交申请</button>
			</div>
		</form>
	</div>
	<script>
		function addDetail(){
			var detail="";
			var subject=$("input[name='partyFormMap.subject']").val();
			var bianhao="活动编号:待生成";
			var beginTime=$("input[name='partyFormMap.startTime']").val();
			var endTime=$("input[name='partyFormMap.endTime']").val();
			var province=$("select[name='partyFormMap.province'] option:selected").text();
			var city=$("select[name='partyFormMap.city'] option:selected").text();
			var area=$("select[name='partyFormMap.area'] option:selected").text();
			var street=$("select[name='partyFormMap.street'] option:selected").text();
			var address=$("input[name='partyFormMap.address']").val();
			var contact=$("input[name='partyFormMap.contact']").val();
			var phone=$("input[name='partyFormMap.phone']").val();
			var notice=$("input[name='partyFormMap.notice']").val();
			var zhubanfang="${orgName}";
			if(subject){
				detail+="活动主题:"+subject+"、 ";
			}
			detail+=bianhao+"、 ";
			if(beginTime){
				detail+="开始时间:"+beginTime+"、 ";
			}
			if(endTime){
				detail+="结束时间:"+endTime+"、 ";
			}
			/* if(beginTime!=""&&endTime!=""&&beginTime>endTime){
				 layer.msg("开始时间不能大于结束时间"); 
				$("#tj").attr("disabled","true");
			}else{
				$("#tj").removeAttr("disabled");
			}*/
			if(province){
				detail+="地点:"+province+city+area+street;
			}
			if(address){
				detail+=address+"、 ";
			}else{
				detail+="、 ";
			}
			if(contact){
				detail+="联系人:"+contact+"、 ";
			}
			if(phone){
				detail+="联系方式:"+phone+"、 ";
			}
			if(notice){
				detail+="注意事项:"+notice+", ";
			}
			if(zhubanfang){
				detail+="("+zhubanfang+")感谢您的热情参与";
			}
			$("textarea[name='partyFormMap.detail']").val(detail);
		}

		$(function() {
			$("#partyForm input").keyup(addDetail);
			$("#partyForm input").change(addDetail);
			$("#partyForm select").change(addDetail);
			// ------------------- 初始化 注册日期
			$("#partyFormMap_startTime").datetimePicker({
				onChange : function(p) {
					$("#partyForm").valid();
				}
			});
			$("#partyFormMap_endTime").datetimePicker({
				onChange : function(p) {
					$("#partyForm").valid();
				}
			});
			$("#partyFormMap_detail").keyup(
					function() {
						$(this).parent().find(".weui_textarea_counter").find(
								"span:first").html($(this).val().length);
					});
			$("[name='partyFormMap.description']").keyup(
					function() {
						$(this).parent().find(".weui_textarea_counter").find(
								"span:first").html($(this).val().length);
			});
			//-------------------- 初始化省市区
			initRegionFormControl("310000","310100","310112","");
			//---------------------jquery form验证
			$("#partyForm").validate(
					{
						submitHandler : function(form) {
							//验证图片类型
							var url = $("input[type=file]").val();
							if ($.isEmptyObject(url)) {
								$.toast("请上传活动图片", "cancel");
								return false;
							}
							url = url.toLowerCase();
							if(url.indexOf("bmp")>0||url.indexOf("jpg")>0||url.indexOf("jpeg")>0||url.indexOf("png")>0||url.indexOf("gif")>0){
							}else{
								$.toast("活动图片类型有误", "cancel");
								return false;
							}
							
							
							$("button[type=submit]").attr("disabled", true);
							$("button[type=submit]").addClass("weui_btn_disabled");
							form.submit();
						},
						success : function(error, element) {
							//验证通过时
							$(element).parents(".weui_cell").removeClass(
									"weui_cell_warn");
						},
						errorPlacement : function(error, element) {
							//验证失败时
							$(element).parents(".weui_cell").addClass(
									"weui_cell_warn");
						},
						rules : {
							"partyFormMap.subject" : {
								required : true
							},
							"partyFormMap.detail" : {
								required : true,
								maxlength : 200
							},
							"partyFormMap.expectPerson" : {
								required : true,
								digits : true
							},
							"partyFormMap.contact" : {
								required : true
							},
							"partyFormMap.phone" : {
								required : true
							},
							"partyFormMap.notice" : {
								required : false
							},
							"partyFormMap.attendTarget" : {
								required : false
							},
							"partyFormMap.province" : {
								required : true
							},
							"partyFormMap.city" : {
								required : true
							},
							"partyFormMap.area" : {
								required : true
							},
							"partyFormMap.street" : {
								required : true
							},
							"partyFormMap.address" : {
								required : true
							},
							"partyFormMap.startTime" : {
								required : true
							},
							"partyFormMap.endTime" : {
								required : true,
								greaterThen:"#partyFormMap_startTime"
							},"selectType" : {
								required : true
							},"partyFormMap.description" : {
								required : true,
								maxlength : 1000
							}
						}
					});
			
			$("#selectType").select({
		        title: "活动类型",
		        items: [
		          <c:forEach items="${typeList }" var="record">
			      	{title : "${record.label }", value : "${record.value }"},
			      </c:forEach>
		        ],
		        onChange: function(d) {
		            $("#partyFormMap_type").val(d.values);
		        }
		    });
			
			$(".weui_uploader_file").click (function() {
				$(".weui_uploader_input").click();
			}); 
			$(".weui_uploader_input").change(function() {
				var $file = $(this);
				var fileObj = $file[0];
				var windowURL = window.URL || window.webkitURL;
				var dataURL;
				var preview = $(".weui_uploader_file");
				
				if(fileObj && fileObj.files && fileObj.files[0]){
					dataURL = windowURL.createObjectURL(fileObj.files[0]);
					preview.css('background-image', "url(" + dataURL + ")");
				} else {
					preview.css('background-image', "url(${ctx}/images/weixin/nothing.png)");
				}
			});
		});
	</script>
</body>
</html>